<!--
Licensed under the Apache License, Version 2.0 (the "License");
you may not use this file except in compliance with the License.
You may obtain a copy of the License at
    http://www.apache.org/licenses/LICENSE-2.0
Unless required by applicable law or agreed to in writing, software
distributed under the License is distributed on an "AS IS" BASIS,
WITHOUT WARRANTIES OR CONDITIONS OF ANY KIND, either express or implied.
See the License for the specific language governing permissions and
limitations under the License.
-->

<headroom tolerance="10" offset="30" class="navbar navbar-inverse navbar-fixed-top"
          style="display: none;" role="navigation"
          ng-class="{'displayNavBar': !asIframe}">
  <div class="container">
    <div class="navbar-header">
      <button type="button" class="navbar-toggle collapsed" data-toggle="collapse" data-target=".navbar-collapse">
        <span class="icon-bar"></span>
        <span class="icon-bar"></span>
        <span class="icon-bar"></span>
      </button>
      <a class="navbar-brand navbar-logo" href="#/">
        <img style="margin-top: -7px;" src="assets/images/zepLogoW.png" width="50" alt="Zeppelin" />
      </a>
      <a class="navbar-brand navbar-title" href="#/">
        <span>Zeppelin</span>
      </a>
    </div>

    <div class="collapse navbar-collapse" ng-controller="NavCtrl as navbar">
      <ul class="nav navbar-nav" ng-if="ticket">
        <!-- menu: Notebook -->
        <li class="dropdown notebook-list-dropdown" uib-dropdown>
          <a href="#" class="navbar-menu navbar-menu-notebook dropdown-toggle"
             data-toggle="dropdown" uib-dropdown-toggle>
            <span>Notebook</span>
            <span class="caret"></span></a>
          <ul class="dropdown-menu" role="menu">
            <li ng-controller="NoteCreateCtrl as noteCreateCtrl">
              <a href="" data-toggle="modal" data-target="#noteCreateModal" ng-click="noteCreateCtrl.getInterpreterSettings()">
                <i class="fa fa-plus"></i>
                Create new note
              </a>
            </li>
            <li class="divider hidden-xs"></li>
            <div id="notebook-list" class="scrollbar-container" ng-if="isDrawNavbarNoteList">
              <li class="filter-names" ng-include="'components/note-name-filter/note-name-filter.html'"></li>
              <div ng-if="!query.q || query.q === ''" infinite-scroll="loadMoreNotes()">
              <li ng-repeat="node in navbar.notes.root.children | limitTo:navbar.numberOfNotesDisplayed track by node.id"
                  ng-class="{'active' : navbar.isActive(node.id)}" ng-include="'components/navbar/navbar-note-list-elem.html'">
              </li>
            </div>
            <div ng-if="query.q" infinite-scroll="myPagingFunction()">
              <li ng-repeat="node in navbar.notes.flatList | filter : query.q | orderBy:navbar.arrayOrderingSrv.noteFlatListOrdering | limitTo:navbar.numberOfNotesDisplayed track by node.id"
                  ng-class="{'active' : navbar.isActive(node.id)}" ng-include="'components/navbar/navbar-note-list-elem.html'">
              </li>
            </div>
            </div>
          </ul>
        </li>
        <!-- menu: Job -->
        <li>
          <a class="navbar-menu navbar-menu-job" href="#/jobmanager">
            <span>Job</span>
          </a>
        </li>
      </ul>

      <ul class="nav navbar-nav navbar-right" style="margin-right:5px;">
        <li class="nav-component" ng-if="ticket">

          <form role="search" data-ng-model="navbar.searchForm"
                style="display: inline-block; margin: 0px"
                class="navbar-form"
                ng-submit="navbar.search(navbar.searchForm.searchTerm)">
            <input
              type="text"
              ng-model="navbar.searchForm.searchTerm"
              ng-disabled="!navbar.connected"
              id="navbar-search"
              class="form-control navbar-search"
              placeholder="&#xf002 Search" />
          </form>
        </li>
        <li style="margin-left: 10px;">
          <div class="dropdown">
            <i ng-if="navbar.connected" class="fa fa-circle server-connected"
               uib-tooltip="WebSocket Connected" tooltip-placement="bottom" style="margin-top: 7px; margin-right: 0px; vertical-align: top"></i>
            <i ng-if="!navbar.connected" class="fa fa-circle server-disconnected"
               uib-tooltip="WebSocket Disconnected" tooltip-placement="bottom" style="margin-top: 7px; vertical-align: top"></i>
            <button ng-if="ticket" class="nav-btn dropdown-toggle" type="button" data-toggle="dropdown" style="margin:11px 5px 0 0; padding-left: 0px;">
              <span class="username">{{ticket.screenUsername}}</span>
              <span class="caret" style="margin-bottom: 8px"></span>
            </button>
            <span ng-if="!ticket" style="margin: 5px;"></span>
            <ul class="dropdown-menu">
              <li><a href="" data-toggle="modal" data-target="#aboutModal">About Zeppelin</a></li>
              <li role="separator" style="margin: 5px 0;" class="divider"></li>
              <li><a href="#/interpreter">Interpreter</a></li>
              <li><a href="#/notebookRepos">Notebook Repos</a></li>
              <li><a href="#/credential">Credential</a></li>
              <li><a href="#/helium">Helium</a></li>
              <li><a href="#/configuration">Configuration</a></li>
              <li ng-if="clusterAddr !== ''"><a href="#/cluster">Cluster</a> </li>
              <li ng-if="ticket.principal && ticket.principal !== 'anonymous'" role="separator" style="margin: 5px 0;" class="divider"></li>
              <li ng-if="ticket.principal && ticket.principal !== 'anonymous'"><a ng-click="navbar.logout()">Logout</a></li>
              <li role="separator" style="margin: 5px 0;" class="divider"></li>
              <li><a href="/next">Try the new Zeppelin</a></li>
            </ul>
          </div>
        </li>
        <li class="nav-component" ng-if="!ticket">
          <button class="btn nav-login-btn" data-toggle="modal" data-target="#loginModal"
                  ng-click="navbar.showLoginWindow()">Login
          </button>
        </li>
      </ul>
    </div>
  </div>
</headroom>

<!-- about dialog -->
<div id="aboutModal" class="modal fade" role="dialog" tabindex="-1">
  <div class="modal-dialog">
    <div class="modal-content">
      <!-- about dialog header -->
      <div class="modal-header modal-header-about">
        <button type="button" class="close" data-dismiss="modal">&times;</button>
        <h4 class="modal-title">About Zeppelin</h4>
      </div>

      <!-- about dialog body -->
      <div class="modal-body modal-body-about">
          <div class="hidden-xs col-sm-4 logo">
            <img src="assets/images/zepLogo.png" alt="Apache Zeppelin" title="Apache Zeppelin" />
          </div>
          <div class="col-xs-12 col-sm-8 content">
            <h3>Apache Zeppelin</h3>
            <br/>
            <span id="i18n-14">Version</span>
            <span class="modal-body-about-version"> {{zeppelinVersion}} </span>
            <br/>
            <br/>
            <a href="http://zeppelin.apache.org/" target="_blank"><span id="i18n-15">Get involved!</span></a>
            <br/>
            <a href="http://www.apache.org/licenses/LICENSE-2.0" target="_blank"><span id="i18n-16">Licensed under the Apache License, Version 2.0</span></a>
        </div>

      </div>
    </div>
  </div>
</div>
